<template>
  <div>
    <swiper></swiper>
    <index-2-part-1></index-2-part-1>
    <!-- 第二块内容 -->
    <div class="x-warp">
      <div class="x-warp-box">
        <div>
          <div>
            <p>特色医疗技术</p>
          </div>
          <div class="warp">
            <div class="btn">
              <div></div>
              <div></div>
            </div>
            <div class="lun">
              <div class="lunitem">
                <div class="lunimg">
                  <img src="/img/index2/lun5.jpg" alt="" />
                </div>
                <div>
                  <p>单向式胸腔镜肺叶切除术</p>
                  <p>以单点单向、层次推进为核心。</p>
                </div>
              </div>
              <div>
                <div class="lunitem">
                  <div class="lunimg">
                    <img src="/img/index2/lun2.jpg" alt="" />
                  </div>
                  <div>
                    <p>不开胸（TAVI）治疗老年主动脉瓣狭窄和主动脉瓣反流</p>
                    <p>TAVI手术是成熟的主动脉瓣疾病微创治疗技术</p>
                  </div>
                </div>
              </div>
              <div>
                <div class="lunitem">
                  <div class="lunimg">
                    <img src="/img/index2/lun8.jpg" alt="" />
                  </div>
                  <div>
                    <p>低位直肠癌的微创外科治疗技术</p>
                    <p>
                      自2000年起，华西医院胃肠外科团队在国内外率先开展低位直肠癌的微创外科治疗，及同步进行肿瘤区域微转移研究
                    </p>
                  </div>
                </div>
              </div>
              <div>
                <div class="lunitem">
                  <div class="lunimg">
                    <img src="/img/index2/lun3.jpg" alt="" />
                  </div>
                  <div>
                    <p>TAVI治疗老年主动脉瓣反流及主动脉瓣狭窄</p>
                    <p>
                      迅速成为国内经导管介入瓣膜植入病例量最大的心脏中心之一
                    </p>
                  </div>
                </div>
              </div>
              <div>
                <div class="lunitem">
                  <div class="lunimg">
                    <img src="/img/index2/lun1.jpg" alt="" />
                  </div>
                  <div>
                    <p>不开胸（TAVI）治疗老年主动脉瓣狭窄和主动脉瓣反流</p>
                    <p>不开胸（TAVI）治疗老年主动脉瓣狭窄和主动脉瓣反流</p>
                  </div>
                </div>
              </div>
              <div>
                <div class="lunitem">
                  <div class="lunimg">
                    <img src="/img/index2/lun6.jpg" alt="" />
                  </div>
                  <div>
                    <p>腹腔镜胰十二指肠切除术</p>
                    <p>世界上第一例腹腔镜胰十二指肠手术</p>
                  </div>
                </div>
              </div>
              <div>
                <div class="lunitem">
                  <div class="lunimg">
                    <img src="/img/index2/lun1.jpg" alt="" />
                  </div>
                  <div>
                    <p>肾脏移植技术创新</p>
                    <p>作为我国最早开展肾移植的单位之一</p>
                  </div>
                </div>
              </div>
              <div>
                <div class="lunitem">
                  <div class="lunimg">
                    <img src="/img/index2/lun7.jpg" alt="" />
                  </div>
                  <div>
                    <p>消化道早癌及胆胰微创治疗</p>
                    <p>
                      胡兵教授团队以消化道早癌、胆胰疾病基础和临床研究为方向
                    </p>
                  </div>
                </div>
              </div>
              <div>
                <div class="lunitem">
                  <div class="lunimg">
                    <img src="/img/index2/lun9.jpg" alt="" />
                  </div>
                  <div>
                    <p>
                      胡兵教授团队以消化道早癌、胆胰疾病基础和临床研究为方向
                    </p>
                    <p>
                      1979年华西医院成功开展了四川省第一例、全国第三例肝移植，至今已开展各类肝移植1600余例。
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="imgbox">
          <img src="/img/index2/srt1.jpg" alt="" />
          <div class="jkkp">
            <div>
              <p class="jkkp-title">健康科普</p>
            </div>
            <div>
              <div class="jkkp-list">
                <p>【新冠肺炎系列科普视频】生活中...</p>
                <p>2020.02.13</p>
              </div>
              <div class="jkkp-list">
                <p>2021年科普活动</p>
                <p>2021.10.31</p>
              </div>
              <div class="jkkp-list">
                <p>2020年科普活动</p>
                <p>2020.02.13</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第三块内容 -->
    <div class="x-warp2">
      <div class="x-warp2-title">
        <div class="x-left">
          <span :class="{ curs2: index2 == 0 }" @click="curs2(0)"
            >通知公告</span
          >
          <span :class="{ curs2: index2 == 1 }" @click="curs2(1)"
            >招生面试</span
          >
          <span :class="{ curs2: index2 == 2 }" @click="curs2(2)"
            >受试者招募</span
          >
          <span :class="{ curs2: index2 == 3 }" @click="curs2(3)"
            >华西志愿者</span
          >
        </div>
        <div class="x-right">
          <span>了解更多</span><i class="iconfont icon-jixianghangkong_HO"></i>
        </div>
      </div>
      <template v-if="index2 == 0">
        <index-x-warp :data="warplist1"></index-x-warp>
      </template>
      <template v-else-if="index2 == 1">
        <index-x-warp :data="warplist2"></index-x-warp>
      </template>
      <template v-else-if="index2 == 2">
        <index-x-warp :data="warplist3"></index-x-warp>
      </template>
      <template v-else-if="index2 == 3">
        <index-x-warp :data="warplist4"></index-x-warp>
      </template>
    </div>
    <!-- 第四块内容 -->
    <index-x-warp-2></index-x-warp-2>
    <!-- 第五块内容 -->
    <index-2-map></index-2-map>
  </div>
</template>

<script>
import axios from "axios";
import { getwarplist1,getwarplist2,getwarplist3,getwarplist4 } from "../api";
import "@/assets/js/index2-lun";
import IndexXWarp from "../components/IndexX-warp.vue";
import IndexXWarp2 from "../components/indexX-warp2.vue";
import Index2Part1 from "../components/index2-part1.vue";
import Index2Map from "../components/index2-map.vue";
import Swiper from "../components/Swiper.vue";
export default {
  components: { IndexXWarp, IndexXWarp2, Index2Part1, Index2Map, Swiper },
  data() {
    return {
      index: "",
      index2: 0,
      warplist1: [],
      warplist2: [],
      warplist3: [],
      warplist4: [],
    };
  },
  mounted() {
    this.getlist1();
    this.getlist2();
    this.getlist3();
    this.getlist4();
  },
  methods: {
    curs(value) {
      this.index = value;
    },
    curs2(value) {
      this.index2 = value;
    },
    async getlist1() {
      const { data } = await getwarplist1();
      this.warplist1 = data;
      console.log(data);
    },
    async getlist2() {
      const { data } = await getwarplist2();
      this.warplist2 = data;
      console.log(data);
    },
    async getlist3() {
      const { data } = await getwarplist3();
      this.warplist3 = data;
      console.log(data);
    },
    async getlist4() {
      const { data } = await getwarplist4();
      this.warplist4 = data;
      console.log(data);
    },
  },
};
</script>

<style  src='@/assets/css/index2-lun.css' scoped></style>
  
<style lang="scss" scoped>
.x-warp2 {
  margin: 50px auto;
  width: 1920px;
  .x-warp2-title {
    width: 1180px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .x-right {
    cursor: pointer;
    &:hover {
      color: #c7a368;
    }
    i {
      margin-left: 20px;
    }
  }
  .x-left {
    > span {
      cursor: pointer;
      &.curs2 {
        color: #c7a368;
      }
      color: #333333;
      margin-right: 48px;
      font-size: 32px;
    }
  }
}
.jkkp {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  .jkkp-title {
    writing-mode: vertical-lr;
    letter-spacing: 5px;
    font-size: 32px;
  }
  .jkkp-list {
    cursor: pointer;
    margin: 20px 0;
  }
  .jkkp-list p {
    margin: 5px 0;
    font-size: 14px;
  }
}
</style>